<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style></style>
</head>

<body>

<!--<span style=" background:url(image/sys-icons-16.png) no-repeat 5px -93px #E5F5FF; border:solid 1px #a4dbfe;font-size: 12px;
    line-height: 20px;
    margin-left: 4px;
    display:inline-block; padding:5px 8px 5px 24px;
    vertical-align:middle;
    ">用于登录和找回密码，不会公开,不会公开不会公开不会公开不会公开不会公开
</span>
<span style=" background:url(image/sys-icons-16.png) no-repeat 5px 7px #E5F5FF; border:solid 1px #a4dbfe;font-size: 12px;
    line-height: 20px;
    margin-left: 4px;
    display:inline-block; padding:5px 8px 5px 24px;
    vertical-align:middle;
    ">用于登录和找回密码，不会公开,不会公开不会公开不会公开不会公开不会公开
</span>
<span style=" background:url(image/sys-icons-16.png) no-repeat 5px 7px;
    display:inline-block;
    width:25px;	
    height:30px;
    vertical-align:middle;"></span>-->
<form>
  <table>
    <tr>
      <td>测试：</td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td>测试1：</td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td>测试1：</td>
      <td><input type="text"></td>
    </tr>
  </table>
</form>
浅析网站开发CSS架构 版本：v1.10 文件状态： [ ] 草稿 [ ] 正式发布 [ √ ] 正在修改 文件标识：    当前版本： V1.10   作 者： Preston   完成日期： 2010-12-9   1 写在前面的 3 2 整体阐述 3 3 CSS样式分离 4 3.1 CSS分离 4 3.2 设计师的配合 5 3.3 前端工程师的功力 5 4 CSS样式合并 5 4.1 CSS分离与合并（组合） 6 5 CSS架构 7 5.1 CSS重置库 8 5.2 通用样式库 8 5.3 公共样式库 9 5.4 布局样式库 9 5.5 按钮、图标、表单库 9 5.6 模块库 10 5.7 私有库 10 6 最后想说的 10 写在前面的 以下内容是平时工作中所积累形成的，其中不乏带有个人感情色彩。在此只是阐述及归纳。 整体阐述 当你是一个从业多年的WEB前端人员，或是开发过大量的页面，就会发现一个现象，即使不是同一个网站，所定义的CSS中也很多相同的类，当然，不是同一网站没法合并，倘若是同一个网站，每个频道，或是一个频道的每个页面要都是一套CSS样式，是不是太浪费了。 那么是不是该把这CSS掰开、揉碎好好的说道说道。CSS架构，这个学术性的名称就被我引用了。 在讨论整个CSS架构前，我想先来说说CSS本身。 众所周知，CSS的诞生，就是样式与结构的分离，就代表着精简与重用。 在多年前，人们开发网站是，样式都是写在html代码中，维护起来那个繁琐是不言而喻的，有了CSS后，当需要定义一个字体颜色时，就可以：.red { color: #F00; } 页面中凡需要字体为红色时，都可以引用，修改起来也就是一步的事情。同时解放了html代码。 可随着网站内容日益丰富，我们已经不能单单只停留在初级的样式与结构的分离层面。需要对CSS进行解剖，因为只有深层次的了解它，才能更好的驾驭。 在对CSS处理的问题上，各个网站的做法都不尽相同。 有整个站点就一个CSS文件的，一般符合web2.0标准的，如开心网；有分为页眉，页脚，主体不同部分的；有按个频道页面建立样式的； 亦有几个公共样式表，其余视不同页面建立的。更有所有CSS都放在页面head中的。 所有这些，并无正确错误之分，只有是否适合，毕竟一切做法为的都是更为高效简洁 的代码。 这里我想说说自己的做法。一个站点CSS文件分为：CSS重置库；通用样式库；公共样式库； 布局样式库；按钮、图标、表单库；模块库； 私有库。 除了最后 一个，其余都是公共的库。这样做虽然是单个页面的连接数有所增加，但是对于门户型网站，其整体的开发成本会有大大的降低。不过实现这种开发模式有几个前提，样式分离；样式合并；前后台通力合作。 CSS样式分离 CSS分离 前面提到过当一个页面需要一个红色的样式时，定义.red { color: #F00; }，然后引用就可以了，而这里说的CSS分离，是一个个不同的CSS文件，由多个不同的页面引用，如一个网站的head样式单独 一个文件每个页面都引用。不过，这种做法大家都知道，我也不会单单的说这点，这里想说的CSS重用的概念。 人们都知道钱币只有1元、5元、10元，以前还有2元，但是不会出现，4、6、7等等，因为通过前面几个就可以组合 使用了。这个道理很简单。那么我们是不是也可以把CSS的属性拆开。这样每当需要哪些就引用什么。 如<span class="more">更多</span> .more { display: inline; float: right; margin-right: 10px; color: #F00; font-weight: normal; } 而拆分后，
<div class="fr red fwn mr10">更多</div>
，样式为： .fr { display: inline; float: right; } .red { color: #F00; } .fwn { font-weight: normal; } .mr10 { margin-right: 10px; } 以上4个类有两个属于通用类(.fr和.fwn)，属性是没有变量的，当需要右浮动 和非粗体时就用此两个类。而像此种类别的还有不少，在此列出我平时使用的。 .fl { display: inline; float: left; } .fr { display: inline; float: right; } .db { display: block; } .di { display: inline-block; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } .fwb { font-weight: bolder; } .fwn { font-weight: normal; } .tdn { text-decoration:: none; } .tdu { text-decoration: underline; } .n1 { text-align: center; } .n2 { text-align: left; } .n3 { text-align: right; } .vm { vertical-align: middle; } .vt { vertical-align: top; } .vb { vertical-align: bottom; } .fa { font-family: Arial; } .mo { font-family: "宋体" ; } .fa1 { font-family: "黑体" ; } .wsn { white-space: normal; } .re { position: relative; } .ov { overflow: hidden; zoom: 1; } 这样需要上述的效果时，就可以自由组合的了。样式拆分 ，有助于精简CSS文件。每个CSS样式的重用性都发挥到极致。后期维护也会轻松多。同时，除了这些类以外，还有颜色，外边距，内间距，这些也是可以单独定义出来的 ，只是它们的值是变量的。如之前的.mr10 { margin-right: 10px; } 说了这些，不难发现，CSS样式越是分离，就可以使每个类重用性发挥到极最大化，CSS代码就越精简！不过凡事都不是绝对
</body>
</html>
